<template>
  <el-header class="header">
    <div class="content">
      <div class="logo">
        <img src="@/assets/tx-logo.png" alt="" @click="$router.push('/')" />
      </div>
      <nav>
        <!-- <router-link v-for="(item, idx) in navList" :key="idx" :to="item.href">{{item.title}}
                </router-link> -->
        <div class="el-icon-document icon hd_st_tit">分类</div>
        <div class="hd_sort" @mouseleave="navNone">
          <div
            class="hd_st_acr"
            v-for="(tit, idx) in navList"
            :key="idx"
            @mouseenter="navNow(tit.id)"
          >
            <div class="hd_st_acr_top">
              <span href="" @click="tokind(idx)">{{ tit.title }}</span>
              <span></span>
            </div>
            <div class="hd_st_acr_bot">
              <a href="" v-for="(st, idx2) in navSort[idx]" :key="idx2">
                {{ st }}
              </a>
            </div>
          </div>
          <ul>
            <li v-for="(sec, idx3) in navSec[navId]" :key="idx3">
              <a class="hd_st_tit2" href="">{{ sec.title }}</a>
              <div>
                <a href="" v-for="(tp, idx4) in sec.type" :key="idx4">{{
                  tp
                }}</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
      <div class="search">
        <el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="userMsg">
        <div>
          <span>企业培训</span>
          <span>入驻/合作</span>
          <span>用客户端</span>
          <span>私信</span>
          <span @click="dj" class="login"
            @mouseover="into" @mouseout="out"><i class="tip" >{{ change }}</i>
            <!-- <span v-if="change!=='登录'">退出</span> -->
            
            <ul class="changeHover" v-show="this.display">
              <li>
                <router-link to="/person/hot/01">课程表</router-link>
              </li>
              <li>
                <router-link to="/person/hot/02">全部订单</router-link>
              </li>
              <li>
                <router-link to="/person/hot/03">收藏</router-link>
              </li>
              <li>
                <router-link to="/person/hot/04">优惠</router-link>
              </li>
              <li>
                <router-link to="/person/hot/05">个人信息</router-link>
              </li>
              <li @click.stop="exit()">
                退出登录
                <!-- <router-link to="" @click="exit()">退出登录</router-link> -->
              </li>
            </ul>
          </span>
          
        </div>
      </div>
      <login :isok="ok" @user="getuser"></login>
    </div>
  </el-header>
</template>

<script>
import { getNavData,logout } from "@/api";
import login from "@/components/Login.vue";
import tools from "@/tools";



export default {
  name: "ComHead",
  data() {
    return {
      input: "",
      navList: [],
      navSort: [],
      navSec: [],
      navId: [],
      ok: { value: false },
      change: "登录",
      display:false
    };
  },
  created() {
    
    getNavData().then((res) => {
      this.navList = res.data;
      this.navList.forEach((val) => {
        this.navSort.push(val.sort);
        this.navSec.push(val.sec);
      });
    });
    
  },
  mounted(){
    // console.log(tools.getCookie)
    this.change=tools.getCookie("loginUserName")||"登录"
    // this.change = document.cookie
    console.log(this.change)
  },
  methods: {
    getuser(res) {
      this.change = res;
    },
    tokind(i) {
      this.$router
        .push({
          name: "kind",
          params: {
            id: this.navList[i].id,
          },
        })
        .catch((err) => {});
    },
    navNow(nowId) {
      this.navId = nowId - 1;
    },
    navNone() {
      this.navId = [];
    },
    dj() {
      if (this.change !== "登录") {
        this.ok.value = false;
      } else {
        this.ok.value = true;
        this.display = true
      }
    },
    into(){
			const abc=document.querySelector(".changeHover");
			if(this.change!="登录"){
				abc.style.display="block"
			}
		  },
		  out(){
			const abc=document.querySelector(".changeHover");
			abc.style.display="none"
		  },
    qaz(res) {
      console.log(res);
    },
    exit(){
        // this.change="登录";
        console.log(1111)
        this.change="登录"
        tools.removeCookie("loginUserName")
        tools.removeCookie("token_pass")


      // logout().then(res=>{
      //   this.$store.commit("user/set_isLogin","no")
      //   this.$store.commit("user/set_username","");
      //   this.$store.commit("user/set_password","");
      //   tools.setCookie("isLogin","no")
      // })
    }
  },
  components: {
    login,
  },
}
</script>

<style lang="less" scoped>
.header {
  height: 80px !important;
  // background-color: skyblue;
  background-color: #fff;
  display: flex;
  border-bottom: solid 3px #eaeaea;
  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    align-items: center;
    // background-color: pink;
    background-color: #fff;
    .logo {
      margin-right: 20px;

      img {
        width: 200px;
      }
    }
    nav {
      margin-left: auto;
      width: 80px;
      height: 80px;
      position: relative;
      &:hover .hd_sort {
        z-index: 999;
        display: block;
      }
      .hd_st_tit {
        line-height: 80px;
        font-size: 20px;
        font-weight: 400;
        text-align: center;
      }
      .hd_sort {
        display: none;
        position: absolute;
        top: 80px;
        transform: translateX(-50px);
        width: 235px;
        border: 1px solid #eaeaea;
        background: #fff;
        .hd_st_acr {
          border: 1px solid #eaeaea;
          padding: 10px 15px;
          &:hover {
            background: #f1f1f1;
          }
          .hd_st_acr_top {
            display: flex;
            flex-direction: row;
            margin-bottom: 5px;
            span {
              line-height: 30px;
              flex: 1;
              text-decoration: none;
              color: #000;
              font-weight: bold;
              font-size: 16px;
              &:hover {
                text-decoration: underline;
              }
            }
            span {
              width: 25px;
              height: 30px;
              position: relative;
              &::before {
                content: "";
                width: 30px;
                height: 30px;
                background: url(../../public/img/icons/into.png) no-repeat
                  center center;
                background-size: 70%;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
          .hd_st_acr_bot {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            a {
              font-size: 14px;
              color: #999;
              display: block;
              text-decoration: none;
              margin-right: 10px;
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
        ul {
          width: 785px;
          position: absolute;
          left: 235px;
          top: 0;
          border: 1px solid #eaeaea;
          background: #fff;
          padding: 0 25px;
          box-sizing: border-box;
          li {
            padding: 20px 0;
            display: flex;
            flex-direction: row;
            .hd_st_tit2 {
              width: 150px;
              font-weight: bold;
              font-size: 16px;
              text-decoration: none;
              color: #000;
              line-height: 30px;
              text-indent: 2em;
              background: url(../../public/img/icons/icon.png) no-repeat 0 4px;
              background-size: 12%;
              &:hover {
                text-decoration: underline;
              }
            }
            div {
              flex: 1;
              a {
                line-height: 30px;
                text-decoration: none;
                color: #000;
                margin: 0 10px;
                font-size: 14px;
                font-weight: 400;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
    .search {
      display: flex;
      margin: 0 auto;
    }
    .userMsg {
      margin-left: auto;
      position: relative;
      div {
        span {
          height: 50px;
          display:inline-block;
          margin-right: 30px;
          line-height: 50px;
          cursor: pointer;
          height: 50px;
        }
        .login{
            &:hover .changeHover{
              display: block;
            }
            .changeHover {
              display: none;
            background: #fff;
            position: absolute;
            top: 50px;
            right: 10px;
            width:100px;
            text-align:center;
            text-decoration: none;
            li{
              border-bottom:1px solid #ccc;
            }
            li a{
              font-size:14px;
              text-decoration: none;
              color:#000;
              &:hover{
                color:#2E77E5;
              }
            }
          }
        }
        
      }
    }
  }
}
</style>